<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-form-item label="游戏类型">
						<el-select v-model="gameType" placeholder="游戏类型">
							<el-option
									v-for="item in selectGame"
									:key="item.value"
									:label="item.label"
									:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form-item>
				<el-form-item>
					<el-input v-model="userName" placeholder="账号ID" type="number"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getUsers(pageSize)">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="botList" highlight-current-row v-loading="listLoading"  style="width: 100%;">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="gameTxt" label="游戏" width="120">
				<template slot-scope="scope">
					<label>{{scope.row.botType | game}}</label>
				</template>
			</el-table-column>
			<el-table-column prop="gameId" label="场次" width="200">
				<template slot-scope="scope">
					<label>{{scope.row.gameId | field}}</label>
				</template>
			</el-table-column>
			<el-table-column prop="roomId" label="房间" width="200">
			</el-table-column>
			<el-table-column prop="userId" label="账号ID" width="120" sortable>
			</el-table-column>
			<el-table-column prop="username" label="账号" width="120">
			</el-table-column>
			<el-table-column prop="nickname" label="账号昵称" width="200">
			</el-table-column>
			<el-table-column prop="amount" label="账号余额" width="150">
				<template slot-scope="scope">
					<label>{{scope.row.amount | division}}</label>
				</template>
			</el-table-column>
			<el-table-column prop="detail" label="详情" >
				<template slot-scope="scope">
					<el-button type="text" size="small" @click.native="handleDetail(scope.row)">详情</el-button>
				</template>
			</el-table-column>
			<!--<el-table-column prop="age" label="赠送金币" width="200">-->
			<!--</el-table-column>-->
			<el-table-column label="操作" min-width="250">
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="sizes, total, prev, pager, next" :page-sizes="[15, 30, 50]" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->

		<el-dialog title="编辑机器人" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm"  ref="editForm">
				<el-row>
					<el-col :span="8">
						<el-form-item label="游戏类型">
							<el-select v-model="editForm.botType" placeholder="请选择游戏类型" disabled>
								<el-option
										v-for="item in gameList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="场次" >
							<el-select v-model="editForm.gameId" placeholder="请选择场次" disabled>
								<el-option
										v-for="item in fieldList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="房间">
							<el-select v-model="editForm.roomId" placeholder="请选择房间" disabled>
								<el-option
										v-for="item in roomList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="7">
						<el-form-item label="用户ID" >
							<el-input v-model="editForm.userId" type="number" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="账号">
							<el-input v-model="editForm.username" type="text" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="密码">
							<el-input v-model="editForm.password" type="password" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="最低下注金额" v-if="editForm.botType == 'ExplodeAsGoldenFlower'">
					<el-input v-model="editForm.initAmount" type="number"></el-input>
				</el-form-item>
				<el-form-item label="每轮血池补贴" v-if="editForm.botType == 'ExplodeAsGoldenFlower'">
					<el-input v-model="editForm.roundBalance" type="number"></el-input>
				</el-form-item>
				<el-form-item label="下注筹码选择(1,5,10,20,50,100)" v-if="editForm.botType == 'DragonAndTiger' || editForm.botType == 'Baccarat'">
					<el-input v-model="editForm.wagerArr" type="text" placeholder="请输入1,5,10,20,50,100中的值并已'-'号隔开" min="1" max="20" ></el-input>
				</el-form-item>
				<el-form-item label="下注比率" v-if="editForm.botType == 'DragonAndTiger' || editForm.botType == 'Baccarat'">
					<div  class="block">
						<el-input v-model="editForm.wagerPre" type="number" style="width:200px">
							<template slot="append">%</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="最低下注金额" v-if="editForm.botType == 'BucketPush' || editForm.botType == 'DoublebullHundred'">
					<el-input v-model="editForm.wagerUnit" type="number"></el-input>
				</el-form-item>
				<el-form-item label="翻倍区间" v-if="editForm.botType == 'BucketPush' || editForm.botType == 'DoublebullHundred'">
					<div class="block">
						<el-slider
								v-model="editForm.wagerRange"
								range
								show-stops
								:max="10">
						</el-slider>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit(editForm.userId)" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增机器人" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" :rules="addFormRules" ref="addForm">
				<el-row>
					<el-col :span="8">
						<el-form-item label="游戏类型">
							<el-select v-model="addForm.botType" placeholder="请选择游戏类型" @change="getField">
								<el-option
										v-for="item in gameList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="场次" >
							<el-select v-model="addForm.gameId" placeholder="请选择场次" @change="getRoom">
								<el-option
										v-for="item in fieldList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="房间">
							<el-select v-model="addForm.roomId" placeholder="请选择房间">
								<el-option
										v-for="item in roomList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="7">
						<el-form-item label="用户ID" >
							<el-input v-model="addForm.userId" type="number" ></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="账号">
							<el-input v-model="addForm.username" type="text" ></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="密码">
							<el-input v-model="addForm.password" type="password"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="最低下注金额" v-if="addForm.botType == 'ExplodeAsGoldenFlower'">
					<el-input v-model="addForm.initAmount" type="number"></el-input>
				</el-form-item>
				<el-form-item label="每轮血池补贴" v-if="addForm.botType == 'ExplodeAsGoldenFlower'">
					<el-input v-model="addForm.roundBalance" type="number"></el-input>
				</el-form-item>
				<el-form-item label="下注筹码选择(1,5,10,20,50,100)" v-if="addForm.botType == 'DragonAndTiger' || addForm.botType == 'Baccarat'">
					<el-input v-model="addForm.wagerArr" type="text" placeholder="请输入1,5,10,20,50,100中的值并已','号隔开" ></el-input>
				</el-form-item>
				<el-form-item label="下注比率" v-if="addForm.botType == 'DragonAndTiger' || addForm.botType == 'Baccarat'">
					<div  class="block">
						<el-input v-model="addForm.wagerPre" type="number" style="width:200px">
							<template slot="append">%</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="最低下注金额" v-if="addForm.botType == 'BucketPush' || addForm.botType == 'DoublebullHundred' ">
					<el-input v-model="addForm.wagerUnit" type="number"></el-input>
				</el-form-item>
				<el-form-item label="翻倍区间" v-if="addForm.botType == 'BucketPush' || addForm.botType == 'DoublebullHundred'">
					<div class="block">
					<el-slider
							v-model="addForm.wagerRange"
							range
							show-stops
							:max="10">
					</el-slider>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="详细信息" v-model="detailVisible" :close-on-click-modal="false">
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form >
					<el-form-item label="最低下注金额" v-if="detailForm.botType == 'ExplodeAsGoldenFlower'">
						<label>{{detailForm.initAmount}}</label>
					</el-form-item>
					<el-form-item label="可下注范围(1,5,10,20,50,100)" v-if="detailForm.botType == 'DragonAndTiger' || detailForm.botType == 'Baccarat'">
						<label>{{detailForm.wagerArr}}</label>
					</el-form-item>
					<el-form-item label="下注比率" v-if="detailForm.botType == 'DragonAndTiger' || detailForm.botType == 'Baccarat'">
						<label>{{detailForm.wagerPre}}%</label>
					</el-form-item>
					<el-form-item label="最低下注金额" v-if="detailForm.botType == 'BucketPush' || detailForm.botType == 'DoublebullHundred'">
						<label>{{detailForm.wagerUnit}}</label>
					</el-form-item>
					<el-form-item label="翻倍区间" v-if="detailForm.botType == 'BucketPush' || detailForm.botType == 'DoublebullHundred'">
						<label>{{detailForm.wagerRange}}</label>
					</el-form-item>
				</el-form>
			</el-col>
		</el-dialog>
	</section>
</template>

<script>
	import fieldJson from '../../api/field'
	import base64 from '../../api/base64'
	export default {
		data() {
			return {
                botList: [],
                selectGame:[],
				gameType:'',
				total: 0,
				page: 1,
				pageSize:15,
                userName:'',
				listLoading: false,
                detailVisible:false,
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				//编辑界面数据
				editForm: {},
				detailForm:{},
				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
                    money: [
                        { required: true, message: '请输入充值金额', trigger: 'blur' }
                    ],
                    gold: [
                        { required: true, message: '请输入充值金币', trigger: 'blur' }
                    ]
				},
                addForm:{
                    roomId:'',
                    botType:'',
                    gameId:'',
                    userId:'',
                    username:'',
                    password:'',
                    initAmount:'',
                    wagerUnit:'',
                    wagerRange:'',
                    wagerArr:'',
                    wagerPre:'',
                    roundBalance:''
                },
				roomList:[],
				fieldList:[],
                gameList:[
                    {value: 'ExplodeAsGoldenFlower', label: '炸金花'},
                    {value: 'CompetitiveBull', label: '抢庄牛牛'},
                    {value: 'BucketPush', label: '推筒子'},
                    {value: 'DoublebullHundred', label: '百人牛牛'},
                    {value: 'DragonAndTiger', label: '龙虎'},
                    {value: 'Baccarat', label: '百家乐'},
                    {value: 'CrazyBull', label: '疯狂牛牛'}
				]
			}
		},
		methods: {
            handleSizeChange(val) {
                this.pageSize = val
                this.getUsers(this.pageSize);
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers(this.pageSize);
			},
            handleDetail(detail){
				this.detailVisible = true
				this.detailForm = detail
            },
            getField(val){
                this.addForm.gameId = ''
                this.addForm.botType = val
				switch (val){
					case 'ExplodeAsGoldenFlower':
                        this.fieldList = fieldJson.ExplodeAsGoldenFlower;
                        break;
					case 'CompetitiveBull':
                        this.fieldList = fieldJson.CompetitiveBull;
                        break;
                    case 'BucketPush':
                        this.fieldList = fieldJson.BucketPush;
                        break;
                    case 'DoublebullHundred':
                        this.fieldList = fieldJson.DoublebullHundred;
                        break;
                    case 'DragonAndTiger':
                        this.fieldList = fieldJson.DragonAndTiger;
                        break;
                    case 'Baccarat':
                        this.fieldList = fieldJson.Baccarat;
                        break;
                    case 'CrazyBull':
                        this.fieldList = fieldJson.CrazyBull;
                        break;
				}
			},
			getRoom(){
				this.addForm.roomId = ''
				this.$axios.get('/game-room-ids/?name='+this.addForm.botType+'&id='+this.addForm.gameId,{},this.global().token).then((res)=>{
					if (res.status == 200){
						let roomArray = []
						res.data.forEach((val)=>{
							let roomList= new Object()
							roomList.value = val
							roomList.label = val
							roomArray.push(roomList)
						})
						this.roomList = roomArray
					}else{
						this.$message({message: res.data, type: 'error'});
					}
				})
			},
			//获取用户列表
			getUsers(page) {
                this.listLoading = true
				this.$axios.get('/bots?userId='+this.userName+'&index='+this.page+'&size='+page+'&botType='+this.gameType,{},this.global().token).then((res)=>{
				    if (res.status == 200){
				        let robotList = res.data.data
                        let base = new base64.Base64()
						robotList.forEach((val)=>{
                            if (val.nickname){
                                val.nickname = base.decode(val.nickname)
                            }
						    val.initAmount = parseFloat(val.initAmount) / 1000
                            val.wagerUnit = parseFloat(val.wagerUnit) / 1000
						})
				        this.total = res.data.count
						this.botList = robotList
                        this.listLoading = false
					}else{
                        this.$message({message: res.data, type: 'error'});
					}
				})
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					this.$axios.delete('/bot/'+row.userId,row,this.global().token).then((res)=>{
					    if (res.status == 200){
                            this.$message({message: '删除成功', type: 'success'});
                            this.getUsers(this.pageSize);
                            this.listLoading = false;
						}else{
                            this.$message({message: res.data, type: 'error'});
						}
					})
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
                switch (row.botType){
                    case 'ExplodeAsGoldenFlower':
                        this.fieldList = fieldJson.ExplodeAsGoldenFlower;
                        break;
                    case 'CompetitiveBull':
                        this.fieldList = fieldJson.CompetitiveBull;
                        break;
                    case 'BucketPush':
                        this.fieldList = fieldJson.BucketPush;
                        break;
                    case 'DoublebullHundred':
                        this.fieldList = fieldJson.DoublebullHundred;
                        break;
                    case 'DragonAndTiger':
                        this.fieldList = fieldJson.DragonAndTiger;
                        break;
                    case 'Baccarat':
                        this.fieldList = fieldJson.Baccarat;
                        break;
                    case 'CrazyBull':
                        this.fieldList = fieldJson.CrazyBull;
                        break;
                }
				this.editForm = Object.assign({}, row);
                this.editForm.wagerArr = this.editForm.wagerArr.join(',')
                // if(this.editForm.wagerArr){
                 //    let array = ''
                 //    this.editForm.wagerArr.forEach((val)=>{
                 //        array += val + ','
                 //    })
				// 	this.editForm.wagerArr = array
                 //    this.editForm.wagerArr=this.editForm.wagerArr.toString().substring(0,this.editForm.wagerArr.length-1)
				// }
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
                    roomId:'',
                    botType:'',
                    gameId:'',
                    userId:'',
                    username:'',
                    password:'',
                    initAmount:'',
					wagerUnit:'',
					wagerRange:[1,1],
                    wagerArr:'',
                    wagerPre:'',
                    roundBalance:''
				};
			},
			//编辑
			editSubmit: function (goldId) {
                if(this.editForm.wagerArr) {
                    this.editForm.wagerArr = this.editForm.wagerArr.split(",")
                }
                this.editForm.roundBalance = parseInt(this.editForm.roundBalance)
                this.editForm.initAmount = parseFloat(this.editForm.initAmount) *1000
                this.editForm.wagerUnit = parseFloat(this.editForm.wagerUnit)*1000
                this.$axios.patch('/bot/'+goldId,this.editForm,this.global().token).then((res)=>{
                    if (res.status == 200){
                        this.$message({message: '修改成功', type: 'success'});
                        this.editFormVisible = false;
                        this.getUsers(this.pageSize);
                    }else{
                        this.$message({message: res.data, type: 'error'});
                    }
                })
			},
			//新增
			addSubmit: function () {
                if(this.addForm.wagerArr) {
                    this.addForm.wagerArr = this.addForm.wagerArr.split(",")
                }
                this.addForm.userId = parseFloat(this.addForm.userId)
                this.addForm.roundBalance = parseInt(this.addForm.roundBalance)
                this.addForm.initAmount = parseFloat(this.addForm.initAmount)*1000
                this.addForm.wagerUnit = parseFloat(this.addForm.wagerUnit)*1000
			    let addRobot = JSON.stringify(this.addForm)
				// let addRobot = '{"roomId":"7cca9850-e659-11e8-b0c4-8f8d74628af0","botType":"ExplodeAsGoldenFlower","gameId":"702","userId":728,"username":"jqr001","password":"jqr123456","initAmount":100}'
				// console.log(addRobot)
                this.$axios.postJson('/bot',addRobot,this.global().token).then((res)=>{
                    if (res.status == 200){
                        this.$message({message: '添加成功', type: 'success'});
                        this.addFormVisible = false;
                        this.getUsers(this.pageSize);
                    }else{
                        this.$message({message: res.data, type: 'error'});
                        this.addForm.wagerArr = this.addForm.wagerArr.join(',')
                    }
                })
			}
		},
		mounted() {
		    this.selectGame = this.gameList
			this.getUsers(this.pageSize);
		}
	}

</script>

<style scoped>
	.block:before{
		content:'';
		display: block;
		clear:both
	}
</style>